<template>
  <div class="orderList">
    <div class="order-search">
      <div class="search-content">
        <van-icon name="search" />
        <span>搜索订单</span>
      </div>
    </div>
    <van-tabs v-model="active" swipeable>
      <van-tab v-for="item in orderStatus" :title="item">
        <ul class="list-wrapper">
          <scroll class="order-scroll">
            <div>
              <li class="order-item" v-for="order in orderList">
                <div class="shop-title">
                  <img style="width:20px; height:20px" :src="order.mall.logo" alt="">
                  <div class="shop-name">
                    <span>{{order.mall.mall_name}}
                      <van-icon name="arrow" style="font-size: .09rem;" />
                    </span>
                    <span style="color:#e02e24">{{order.order_status_prompt}}</span>
                  </div>
                </div>
                <van-card v-for="item in order.order_goods" style="margin-top:0" :title="item.goods_name" :desc="item.spec" :num="item.goods_number" :price="item.goods_price/100" :thumb="item.thumb_url" />
                <div class="price">
                  <p>实付:</p>
                  <p>￥{{order.order_amount/100}}</p>
                  <p>(免运费)</p>
                </div>
                <div class="button">
                  <van-button type="default" size="small">取消订单</van-button>
                  <van-button type="danger" size="small">去支付</van-button>
                </div>
              </li>
            </div>
          </scroll>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import cateHeader from "../../components/Header/cateHeader";
import { orderList } from "../../api/getDatas";
import scroll from "../../common/scroll";
import axios from "axios";
export default {
  components: {
    cateHeader,
    scroll
  },
  data() {
    return {
      active: 0,
      orderStatus: ["全部", "待付款", "待分享", "待发货", "待收货", "待评价"],
      orderList: null
    };
  },
  methods: {
    initData() {
      orderList().then(res => {
        this.orderList = res.data.data.orders;
      });
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style lang="less" scoped>
.list-wrapper {
  position: fixed;
  top: 0.89rem;
  left: 0;
  right: 0;
  bottom: 0;
  .order-scroll {
    height: 100%;
    overflow: hidden;
  }
}
.orderList {
  .order-search {
    width: 100%;
    height: 0.45rem;
    padding: 0.07rem 0.1rem;
    .search-content {
      border-radius: 0.05rem;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 0.31rem;
      background-color: #fff;
      font-size: 0.15rem;
      color: #9c9c9c;
      span {
        margin-left: 0.08rem;
      }
    }
  }
  .cate-header {
    position: relative;
  }
}
.order-item {
  background-color: white;
  margin-bottom: 0.1rem;
  .shop-title {
    display: flex;
    align-items: center;
    padding: 0 0.1rem;
    .shop-name {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      margin-left: 0.1rem;
    }
  }
  .price {
    display: flex;
    height: 0.4rem;
    justify-content: flex-end;
    align-items: center;
    padding-right: 0.1rem;
    p {
      margin-left: 0.03rem;
    }
  }
  .button {
    height: 0.44rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .van-button {
      margin-right: 0.1rem;
    }
  }
}
.shop-title {
  position: relative;
  height: 0.38rem;
}
</style>

<style lang="less">
.order-item {
  .van-card {
    padding: 5px 10px 5px 115px;
    .van-card__thumb {
      width: 0.77rem;
      height: 0.77rem;
    }
  }
}
.van-card__title {
  font-size: 0.13rem;
  color: #151516;
}
</style>

